<script setup lang="ts">
import MyDialog from '@/assets/components/Dialog.vue'
import { inject, ref } from 'vue'
import { UserConfig } from '@/views/desktop/type/index.ts'
import { updateUserConfig } from '@/api/desktop/UserApi'

let userConfig = inject('userConfig', ref<UserConfig>(new UserConfig()))
let dialogVisible = inject('dialogVisible')
let initDesk = inject('initDesk')

const saveUserConfig = () => {
  updateUserConfig(userConfig.value).then((res) => {
    dialogVisible.value['1730057603960832001'] = false
    initDesk()
  })
}
const cancel = () => {
  dialogVisible.value['1730057603960832001'] = false
  initDesk()
}
</script>

<template>
  <my-dialog :width="'30%'">
    <div>
      <div>
        <el-form label-position="right" label-width="100px" :model="userConfig">
          <el-form-item label="导航栏颜色">
            <el-color-picker v-model="userConfig.bottomNavColor" />
          </el-form-item>
          <el-form-item label="字体颜色">
            <el-color-picker v-model="userConfig.fontColor" />
          </el-form-item>
        </el-form>
      </div>

      <div class="flex flex-row-reverse">
        <el-button @click="saveUserConfig" class="ml-3" type="primary">
          保存
        </el-button>
        <el-button @click="cancel" class="" type="primary">取消</el-button>
      </div>
    </div>
  </my-dialog>
</template>

<style scoped></style>
